<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-sys fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>计价规则</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goToTag()" round size="mini">新增计价</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>

							<el-form-item class="w_120">
								<el-select v-model="city_arr" placeholder="城市" @change="changeBtndialog">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="s_time_slot" multiple collapse-tags placeholder="商圈" @change="shearchBtn">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select
									v-model="industry_id"
									placeholder="行业"
									@change="changeIndustry(industry_id, 'search')"
									clearable
								>
									<el-option
										v-for="item in searchIndustryArr"
										:key="item.id"
										:label="item.label_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="type_arr" placeholder="岗位" @change="changeBtndialogtype" clearable>
									<el-option
										v-for="item in mesarr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="status" placeholder="状态" clearable>
									<el-option label="启用" value="1"></el-option>
									<el-option label="已停用" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="编号" align="center"></el-table-column>
						<el-table-column prop="industry_name" label="所属行业">
							<!-- <template slot-scope="{ row }">
								<span>{{
									searchIndustryArr.filter(x => x.id == +row.industry)[0]
										? localobList.filter(x => x.id == +row.industry)[0].label_name || ''
										: ''
								}}</span>
							</template> -->
						</el-table-column>
						<el-table-column prop="label_name" label="岗位"></el-table-column>
						<el-table-column prop="label_name" label="计价方式">
							<template><span>小时</span></template>
						</el-table-column>
						<el-table-column label="等级">
							<template slot-scope="{ row }">
								<div v-for="(level, i) in row.levels" :key="i">{{ level.name }}</div>
							</template>
						</el-table-column>
						<el-table-column width="100" label="劳动者单价">
							<template slot-scope="{ row }">
								<div v-for="(level, i) in row.levels" :key="i">{{ level.baseCPrice }}元/小时</div>
							</template>
						</el-table-column>
						<el-table-column width="100" label="店铺单价">
							<template slot-scope="{ row }">
								<div v-for="(level, i) in row.levels" :key="i">{{ level.baseBPrice }}元/小时</div>
							</template>
						</el-table-column>
						<el-table-column prop="city_name" label="城市" width="70px;"></el-table-column>
						<el-table-column prop="area_name" label="执行商圈"></el-table-column>
						<el-table-column label="状态" width="70px;">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == '1'">启用</span>
								<span class="text-danger" v-if="row.status == '2'">已停用</span>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="操作人" width="100"></el-table-column>
						<el-table-column prop="last_time" label="最后操作时间" width="150"></el-table-column>
						<el-table-column label="操作" width="100" fixed="right">
							<template slot-scope="{ row, $index }">
								<el-link :underline="false" type="info" @click="showModify(row)">查看</el-link>
								<el-link type="danger" :underline="false" v-if="row.status == '1'" @click="redactBtn(row, $index)"
									>禁用</el-link
								>
								<el-link type="success" :underline="false" v-if="row.status == '2'" @click="redactBtn(row, $index)"
									>启用</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :disableMountedFetch="true" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>

		<!-- 商户状态-关闭弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>确认要停用该条计价吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn(2)">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>

		<!-- 商户状态-开启弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStart" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>确认要启用该条计价吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn(1)">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>

		<!-- 新增计价规则 -->
		<el-dialog
			title="新增计价规则"
			:visible.sync="showAddPricePopup"
			width="900px"
			:close-on-click-modal="false"
			@closed="hiddenRY"
		>
			<div class="row-info clear">
				<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>执行城市</div>
				<div class="fl list-cont b">
					<el-select v-model="dataMes.city_arr" placeholder="请选择">
						<el-option
							v-for="item in dataMes.cityList"
							:key="item.id"
							:label="item.city_name"
							:value="`${item.id}|${item.city_name}`"
						></el-option>
					</el-select>
				</div>
			</div>
			<div class="row-info clear">
				<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>执行商圈</div>
				<div class="fl list-cont a">
					<el-select v-model="dataMes.area_arr" placeholder="请选择" @change="changeBtndialogareaNext">
						<el-option
							v-for="item in dataMes.areaList"
							:key="item.id"
							:label="item.area_name"
							:value="`${item.id}|${item.area_name}`"
						></el-option>
					</el-select>
				</div>
			</div>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属行业</div>
					<div class="fl list-cont a">
						<el-select v-model="dataMes.industry" @change="changeIndustry(dataMes.industry, '')">
							<el-option
								v-for="(item, index) in industryJobList"
								:key="index"
								:label="item.label_name"
								:value="item.id"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>岗位</div>
					<div class="fl list-cont b">
						<el-select v-model="dataMes.type_arr" placeholder="请选择" @change="changeBtndialogtypeNext">
							<el-option
								v-for="item in dataMes.mesarr"
								:key="item.id"
								:label="item.label_name"
								:value="`${item.id}|${item.label_name}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>计价方式</div>
					<div class="fl list-cont a">
						<el-select v-model="dataMes.type" placeholder="请选择">
							<el-option label="小时" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear flex">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺单价</div>
					<div class="level-box">
						<div class="level-title level-wrap">
							<div class="level-item">等级</div>
							<div class="level-item">劳动者基础价(元/小时)</div>
							<div class="level-item">+</div>
							<div class="level-item">技术服务费</div>
							<div class="level-item">=</div>
							<div class="level-item">商家基础价(元/小时)</div>
							<el-popover placement="top" width="300" class="pop-confirm" trigger="click">
								<div>该价格为城市级别默认价格，若存在其他商圈则按照商圈实际价格为准</div>
								<i slot="reference" class="el-icon-warning"></i>
							</el-popover>
						</div>
						<div class="level-title level-wrap" v-for="level in levelPrices" :key="level.id">
							<div class="level-item">{{ level.name }}</div>
							<div class="level-item">
								<el-input
									:disabled="!hasPlatformFee"
									@blur="onBasePriceBlur(level, $event)"
									@input="onBasePriceInput(level, $event)"
									:value="level.baseCPrice"
									placeholder="请输入"
								/>
							</div>
							<div class="level-item"></div>
							<div class="level-item">
								<el-input disabled :value="level.platformPrice" />
							</div>
							<div class="level-item"></div>
							<div class="level-item">
								<el-input disabled :value="level | baseBPrice" />
							</div>
						</div>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key opacity-0">说明</div>
					<div class="fl desc">
						<!--            <p>*必须选择技术服务费后才能添加计价规则</p>-->
						<p>*商家基础价等于劳动者基础价与技术服务费之和，劳动者基础价不含调价，青铜级为最低等级，越往上等级越高</p>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">备注:</div>
					<div class="fl list-cont a">
						<el-input
							maxlength="140"
							show-word-limit
							type="textarea"
							:rows="4"
							:cols="55"
							placeholder="请输入内容"
							v-model="dataMes.remark"
						/>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtnAdd">确 定</span>
				<span class="resetBtn" @click="showAddPricePopup = false">取 消</span>
			</div>
		</el-dialog>

		<el-dialog
			title="修改计价规则"
			:visible.sync="showModifyPricePopup"
			width="900px"
			:close-on-click-modal="false"
			@closed="clearModifyInfo"
		>
			<div class="row-info clear">
				<div class="fl title-key">执行城市</div>
				<div class="fl list-cont b">{{ modifyInfo.city_name }}</div>
			</div>
			<div class="row-info clear">
				<div class="fl title-key">执行商圈</div>
				<div class="fl list-cont a">{{ modifyInfo.area_name }}</div>
			</div>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key">所属行业</div>
					<div class="fl list-cont a">{{ modifyInfo.industry_name }}</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">岗位</div>
					<div class="fl list-cont b">{{ modifyInfo.label_name }}</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">计价方式</div>
					<div class="fl list-cont a">小时</div>
				</div>
				<div class="row-info clear flex">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺单价</div>
					<div class="level-box">
						<div class="level-title level-wrap">
							<div class="level-item">等级</div>
							<div class="level-item">劳动者基础价(元/小时)</div>
							<div class="level-item">+</div>
							<div class="level-item">技术服务费</div>
							<div class="level-item">=</div>
							<div class="level-item">商家基础价(元/小时)</div>
							<el-popover placement="top" width="300" class="pop-confirm" trigger="click">
								<div>该价格为城市级别默认价格，若存在其他商圈则按照商圈实际价格为准</div>
								<i slot="reference" class="el-icon-warning"></i>
							</el-popover>
						</div>
						<div class="level-title level-wrap" v-for="level in modifyInfo.levelPrices" :key="level.id">
							<div class="level-item">{{ level.name }}</div>
							<div class="level-item">
								<el-input
									:disabled="!modifyHasPlatformFee"
									@blur="onBasePriceBlur(level, $event)"
									@input="onBasePriceInput(level, $event)"
									:value="level.baseCPrice"
									placeholder="请输入"
								/>
							</div>
							<div class="level-item"></div>
							<div class="level-item">
								<el-input disabled :value="level.platformPrice" />
							</div>
							<div class="level-item"></div>
							<div class="level-item">
								<el-input disabled :value="level | baseBPrice" />
							</div>
						</div>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key opacity-0">说明</div>
					<div class="fl desc">
						<p>*必须选择技术服务费后才能添加计价规则</p>
						<p>*商家基础价等于劳动者基础价与技术服务费之和，劳动者基础价不含调价，青铜级为最低等级，越往上等级越高</p>
					</div>
				</div>

				<div class="row-info clear">
					<div class="fl title-key">备注:</div>
					<div class="fl list-cont a">
						<el-input
							disabled
							type="textarea"
							:rows="4"
							:cols="55"
							placeholder="请输入内容"
							v-model="modifyInfo.remark"
						></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="confirmModify">确 定</span>
				<span class="resetBtn" @click="showModifyPricePopup = false">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
const common = require('../../../static/tool.js')
import { fetchIndustryJob } from '@/api/label.js'
import { fetchAreaList } from '@/api/shop.js'
import { fetchCityList } from '@/api/city.js'
import { getPlatformPrice, fetchRulePriceList, priceCreate, priceUpdate, priceDisabled } from '@/api/price'
import { onBasePriceInput } from '@/utils/util.js'
export default {
	name: 'PriceList',
	data() {
		return {
			id: '',
			ids: '',
			agreement: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			userType: '',
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			agent_id: '',
			business_id: '', //所属商户ID
			business_name: '', //所属商户name
			industry_id: '', //行业
			searchIndustryArr: [], //行业岗位范围列表

			demandList: [], //店铺列表
			diaTitle: '', //弹框title
			showAddPricePopup: false, //新增计价
			//下拉框数据
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			areaList: [], //区域列表
			area_arr: '',
			area_id: '',
			area_name: '',
			mesarr: [], // 岗位列表

			// 新增计价规则
			dataMes: {
				industry: '',

				mesarr: [],
				type_arr: '',
				label_id: '',
				label_name: '',

				type: '',

				cityList: [],
				city_arr: '',
				city_id: '',
				city_name: '',

				areaList: [],
				area_arr: '',
				area_id: '',
				area_name: '',

				remark: ''
			},

			// 修改计价规则
			showModifyPricePopup: false,
			modifyInfo: {
				id: '',
				city: '',
				area: '',
				industry: '',
				label: '',
				type: '',
				levelPrices: [
					{ id: 30, name: '黄金', platformPrice: '', baseCPrice: '' },
					{ id: 20, name: '白银', platformPrice: '', baseCPrice: '' },
					{ id: 10, name: '青铜', platformPrice: '', baseCPrice: '' }
				]
			},

			type_arr: '',
			label_id: '',
			label_name: '',
			StateShowStop: false, //人员状态-弹框关闭
			StateShowStart: false, //人员状态-弹框关闭
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			industryJobList: [],
			localobList: JSON.parse(localStorage.getItem('industryJobList')),
			s_time_slot: '',
			status: '1',
			areaStatus: true,
			agent_reset: 0,

			showUpdateDialog: false, // 是否显示修改规则
			updatePriceRuleData: {
				id: '',
				city_id: '',
				area_id: '',
				industry: '',
				label: '',
				type: '',
				areaList: [],
				industryList: [],
				typeList: []
			},

			platformPrice: '', // 平台管理费
			levelPrices: [
				{ id: 30, name: '黄金', platformPrice: '', baseCPrice: '' },
				{ id: 20, name: '白银', platformPrice: '', baseCPrice: '' },
				{ id: 10, name: '青铜', platformPrice: '', baseCPrice: '' }
			] // 分级定义
		}
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id //接收传参
			this.business_id = this.id
		}
		// TODO 迁移router-guard
		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}
		this.userType = this.manageInfo.user_info.type
		this.getCityList()
	},
	computed: {
		hasPlatformFee() {
			return this.levelPrices.every(it => it.platformPrice > 0 || it.platformPrice === 0)
		},
		modifyHasPlatformFee() {
			return this.modifyInfo.levelPrices.some(it => it.platformPrice > 0)
		}
	},
	filters: {
		baseBPrice(level) {
			if (!level.baseCPrice && !level.platformPrice) {
				return ''
			}

			return Number(+level.baseCPrice + level.platformPrice).toFixed(2)
		}
	},
	watch: {
		areaList(newValue, oldValue) {
			this.getPrice()
		},
		// 监听新增/修改计价规则中的城市选择
		'dataMes.city_arr'(val) {
			if (val) {
				this.switchCity()
			}
		},
		'dataMes.city_id'(val) {
			if (this.dataMes.industry && this.dataMes.label_id && this.dataMes.area_id && val) {
				this.fetchPlatformFee({ source: 'add' })
			}
		},
		'dataMes.industry'(val) {
			if (this.dataMes.city_id && this.dataMes.label_id && this.dataMes.area_id && val) {
				this.fetchPlatformFee({ source: 'add' })
			}
		},
		'dataMes.area_id'(val) {
			if (this.dataMes.industry && this.dataMes.city_id && val && this.dataMes.label_id) {
				this.fetchPlatformFee({ source: 'add' })
			}
		},
		'dataMes.label_id'(val) {
			if (this.dataMes.industry && this.dataMes.city_id && val && this.dataMes.area_id) {
				this.fetchPlatformFee({ source: 'add' })
			}
		}
	},
	methods: {
		onBasePriceBlur(level) {
			if (level.baseCPrice > 0) {
				level.baseCPrice = +level.baseCPrice
			}

			if (/\.$/.test(level.baseCPrice)) {
				level.baseCPrice = +level.baseCPrice
				this.$forceUpdate()
			}

			if (+level.baseCPrice === 0) {
				level.baseCPrice = ''
				this.$forceUpdate()
			}
		},
		// 监听店铺用工等级单价输入框 规则: 最多两位小数的数字
		onBasePriceInput(level, val) {
			// 1. 处理多次输入小数点情况
			if (val.indexOf('.') !== val.lastIndexOf('.')) {
				return
			}

			// 2. 处理是否最多的2位小数的数字
			if (/^\d+(\.\d{0,2})?$/.test(val)) {
				level.baseCPrice = val
			}
			// 3. 其他异常 包含多个非数字非.字符
			else {
				// 清除输入字符串中间的非数字字符
				val = ('' + val)
					.split('')
					.filter(it => /(\d|\.)/i.test(it))
					.reduce((ret, it) => {
						if (ret.indexOf('.') > -1 && it === '.') {
							return ret
						}
						return ret + it
					}, '')

				val = Math.floor(val * 100) / 100
				level.baseCPrice = val || ''
			}

			this.$forceUpdate()
		},

		// 获取平台管理费
		async fetchPlatformFee(params = {}) {
			try {
				const { source } = params
				const ret = await getPlatformPrice({
					industry: source === 'add' ? this.dataMes.industry : this.modifyInfo.industry_id,
					city_id: source === 'add' ? this.dataMes.city_id : this.modifyInfo.city_id,
					label_id: source === 'add' ? this.dataMes.label_id : this.modifyInfo.label_id,
					area_id: source === 'add' ? this.dataMes.area_id : this.modifyInfo.area_id
				})

				if (source === 'add') {
					this.levelPrices.forEach(item => {
						item.platformPrice = +ret[`fee${item.id}`] / 100
					})
				} else {
					this.modifyInfo.levelPrices.forEach(item => {
						item.platformPrice = +ret[`fee${item.id}`] / 100
					})
				}
			} catch (err) {
				this.clearPlatformFee()
			}
		},

		// 代理商组件回传
		async setValue(arrVal) {
			this.agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list

			this.city_val = this.cityList[0].name
			this.city_id = this.cityList[0].id
			this.city_name = this.cityList[0].name
			this.city_arr = this.cityList[0].id + '|' + this.cityList[0].name
			this.industry_id = ''
			this.type_arr = ''
			await this.listArea() //商圈列表
			await this.alljob_type()
		},

		// 获取计价列表
		async getPrice() {
			try {
				var s_departmentIds_Arr = new Array()
				this.s_time_slot.forEach(element => {
					let [id] = element.split('|') // es6 数组解构赋值
					s_departmentIds_Arr.push(id.toString())
				})
				let label_Arr = []
				if (this.industry_id && !this.label_id) {
					let mesarr = this.searchIndustryArr.filter(x => x.id == this.industry_id)[0].children
					mesarr.forEach(it => {
						label_Arr.push(it.id)
					})
				}

				let res = await fetchRulePriceList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					industry: this.industry_id,
					// label_id: this.label_id || label_Arr.join(','),
					label_id: this.label_id || '',
					city_id: this.city_id,
					agent_id: this.agent_id,
					parent_id: this.industry_id,
					area_id: s_departmentIds_Arr.toString(),
					status: this.status
				})

				res.list.forEach(item => {
					item.levels = [
						{
							id: 30,
							name: '黄金',
							baseCPrice: item.price30 / 100,
							baseBPrice: item.shop_price30 / 100
						},
						{
							id: 20,
							name: '白银',
							baseCPrice: item.price20 / 100,
							baseBPrice: item.shop_price20 / 100
						},
						{
							id: 10,
							name: '青铜',
							baseCPrice: item.price10 / 100,
							baseBPrice: item.shop_price10 / 100
						}
					]
				})

				this.demandList = res.list
				this.total = res.count
			} catch (err) {
				console.log(err)
			}
		},

		// 获取城市列表
		async getCityList() {
			try {
				let ret = await fetchCityList()
				this.dataMes.cityList = ret.list
			} catch (err) {
				console.log('err:', err)
			}
		},

		// 获取商圈列表
		async listArea() {
			try {
				this.s_time_slot = []
				let ret = await fetchAreaList({
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				let area = []
				ret.list.forEach(item => {
					item.value = item.area_name
					if (item.id != 0) area.push(item)
				})

				this.areaList = area
			} catch (error) {
				console.log('error:', error)
			}
		},

		// 状态转换
		redactBtn(e, index) {
			this.ids = e.id
			this.index = index
			if (e.status == '1') {
				// 弹框1
				this.StateShowStop = true //状态关闭
				this.diaTitle = '温馨提示'
			} else {
				// 弹框2
				this.StateShowStart = true //状态开启
				this.diaTitle = '温馨提示'
			}
		},

		//隐藏商户弹框
		hiddenRY() {
			this.showAddPricePopup = false
			this.StateShowStart = false
			this.StateShowStop = false
			this.dataMes.id = ''
			this.dataMes.industry = ''
			this.dataMes.type_arr = ''
			this.dataMes.label_id = ''
			this.dataMes.label_name = ''
			this.dataMes.type = ''
			this.dataMes.city_arr = ''
			this.dataMes.city_id = ''
			this.dataMes.city_name = ''
			this.dataMes.area_arr = ''
			this.dataMes.area_id = ''
			this.dataMes.area_name = ''
			this.dataMes.remark = ''

			this.dataMes.shopList = this.shopList
			// this.dataMes.areaList = this.areaList
			this.dataMes.areaList = []
			this.industryJobList = []
			this.dataMes.industry = ''

			this.levelPrices = [
				{ id: 30, name: '黄金', platformPrice: '', baseCPrice: '' },
				{ id: 20, name: '白银', platformPrice: '', baseCPrice: '' },
				{ id: 10, name: '青铜', platformPrice: '', baseCPrice: '' }
			]
		},

		// 状态确认
		async addMenuBtn(e) {
			const msg = e === 2 ? '禁用' : '启用'
			try {
				await priceDisabled({
					id: this.ids,
					status: e
				})

				this.getPrice()
				this.$message.success(`${msg}成功`)
			} catch (err) {
				this.$message.error((err && err.msg) || `${msg}失败`)
			}

			//关闭弹框
			this.hiddenRY()
		},
		async changeBtndialog() {
			let [id, name] = this.city_arr.split('|')
			this.city_id = id.toString()
			this.city_name = name.toString()
			this.industry_id = ''
			this.type_arr = ''
			this.alljob_type()
			await this.listArea() //商圈列表
		},

		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|')
			this.area_id = id.toString()
			this.area_name = name.toString()
		},

		async switchCity() {
			let [id, name] = this.dataMes.city_arr.split('|')
			this.dataMes.city_id = id.toString()
			this.dataMes.city_name = name.toString()
			//显示对应城市的的商圈
			this.dataMes.areaList = []
			this.dataMes.area_arr = ''
			this.dataMes.area_id = ''
			this.dataMes.area_name = ''

			this.dataMes.shopList = []
			this.industryJobList = []
			this.dataMes.industry = ''

			// 获取行业岗位列表
			await this.getIndustryJob()

			// 获取商圈列表 (任何用户商圈都必选 但代理商不能选全部)
			let ret = await fetchAreaList({
				city_id: this.dataMes.city_id,
				city_name: this.dataMes.city_name
			})

			let area = []

			if (+this.userType !== 2) {
				area.push({ id: 0, area_name: '全部' })
			}

			ret.list.forEach(item => {
				item.value = item.area_name
				if (item.id != 0) area.push(item)
			})

			this.dataMes.areaList = area

			// 如果条件满足则 重新获取管理费
			const { industry, area_id, city_id, label_id } = this.dataMes
			if (industry && area_id && city_id && label_id) {
				this.fetchPlatformFee({ source: 'add' })
			}
			// 获取条件不齐，清空原价格
			else {
				this.clearPlatformFee()
			}
		},

		// 清空新增计价的平台管理费
		clearPlatformFee() {
			this.levelPrices = [
				{ id: 30, name: '黄金', platformPrice: '', baseCPrice: '' },
				{ id: 20, name: '白银', platformPrice: '', baseCPrice: '' },
				{ id: 10, name: '青铜', platformPrice: '', baseCPrice: '' }
			]
		},

		changeBtndialogareaNext() {
			let [id, name] = this.dataMes.area_arr.split('|')
			this.dataMes.area_id = id.toString()
			this.dataMes.area_name = name.toString()

			this.dataMes.shopList = []

			this.industryJobList = []
			this.dataMes.industry = ''
			// 清空平台管理费
			this.clearPlatformFee()
			this.getIndustryJob()
			//获取商铺列表
			let fn = new FormData()
			fn.append('area_id', this.dataMes.area_id) //对应商圈下的店铺
			fn.append('fields', 'id,name,area_id,area_name,city_id,city_name') //需要返回的数据
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.dataMes.shopList = res.data.data.list
						} else {
							this.dataMes.shopList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		changeIndustry(val, type) {
			if (!val && type == 'search') {
				this.mesarr = []
				this.type_arr = ''
				this.label_id = ''
			} else if (type == 'search') {
				//搜索行业监听
				this.mesarr = this.searchIndustryArr.filter(x => x.id == val)[0].children
				this.type_arr = ''
				this.label_id = ''
			} else {
				// 新增计价 行业监听
				this.dataMes.type_arr = ''
				this.dataMes.label_id = ''
				this.dataMes.label_name = ''
				this.clearPlatformFee()
				this.dataMes.mesarr = this.industryJobList.filter(x => x.id == this.dataMes.industry)[0].children
			}
		},

		changeBtndialogtype() {
			if (this.type_arr) {
				let [id, name] = this.type_arr.split('|')
				this.label_id = id.toString()
				this.label_name = name.toString()
			} else {
				this.label_id = ''
				this.label_name = ''
			}
		},

		changeBtndialogtypeNext() {
			let [id, name] = this.dataMes.type_arr.split('|')
			this.dataMes.label_id = id.toString()
			this.dataMes.label_name = name.toString()
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.getPrice()
		},

		resetBtn() {
			//重置
			this.resetDataAdd() //重置请求数据
			this.pageNum = 1
			this.getPrice()
		},

		resetDataAdd() {
			this.type_arr = ''
			this.label_id = ''
			this.label_name = ''
			this.city_arr = ''
			this.city_id = ''
			this.city_name = ''
			this.area_arr = ''
			this.area_id = ''
			this.area_name = ''
			this.industry_id = ''
			this.agent_reset += 1
		},

		//标签接口 搜索获取
		async alljob_type() {
			this.mesarr = []
			try {
				let ret = await fetchIndustryJob({
					city_id: this.city_id
				})
				if (ret.length > 0) {
					this.searchIndustryArr = ret
				} else {
					this.searchIndustryArr = []
				}
			} catch (err) {
				console.log(err)
			}
		},

		//编辑页面
		goToEdit(row) {
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		async showModify(row) {
			this.modifyInfo.id = row.id
			this.modifyInfo.city_id = row.city_id
			this.modifyInfo.city_name = row.city_name
			this.modifyInfo.area_id = row.area_id
			this.modifyInfo.area_name = row.area_name
			this.modifyInfo.label_id = row.label_id
			this.modifyInfo.label_name = row.label_name
			this.modifyInfo.industry_id = row.industry
			this.modifyInfo.industry_name = row.industry_name
			this.modifyInfo.remark = row.remark

			// 获取平台管理费
			await this.fetchPlatformFee({ source: 'modify' })

			this.modifyInfo.levelPrices.forEach(it => {
				it.baseCPrice = row[`price${it.id}`] / 100
			})

			this.showModifyPricePopup = true
			this.$forceUpdate()
		},

		goToTag() {
			this.dataMes.mesarr = []
			this.showAddPricePopup = true
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		//店铺的自动完成
		querySearchNext(queryString, cb) {
			var restaurants = this.dataMes.shopList
			var results = queryString ? restaurants.filter(this.createFilterNext(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilterNext(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		//分页组件->子组件传值
		onChildValue(item) {
			const [pageNum, pageSize] = item
			this.pageNum = pageNum
			this.pageSizeNow = pageSize
			//上面的列表数据
			this.getPrice()
		},

		clearModifyInfo() {
			this.modifyInfo.id = ''
			this.showModifyPricePopup = false
		},

		// 修改计价规则
		async confirmModify() {
			if (this.modifyInfo.levelPrices.some(it => !it.baseCPrice)) {
				return this.$message.error('请完整填写店铺各个用工等级单价！')
			}

			const priceList = {}
			this.modifyInfo.levelPrices.forEach(item => {
				priceList[`price${item.id}`] = +item.baseCPrice * 100
			})

			try {
				const ret = await priceUpdate({
					id: this.modifyInfo.id,
					remark: this.modifyInfo.remark,
					...priceList
				})

				if (+ret !== 1) {
					throw new Error('更新失败')
				}
				this.$message.success('修改成功')
			} catch (err) {
				this.$message.error((err && err.msg) || '修改失败')
			}

			this.showModifyPricePopup = false
			this.getPrice() // 刷新列表
		},

		// 添加计价规则
		async addMenuBtnAdd() {
			if (this.dataMes.city_id == '') {
				this.$message.error('请选择执行城市！')
				return false
			}

			if (this.dataMes.area_id == '') {
				this.$message.error('请选择执行商圈！')
				return false
			}

			if (this.dataMes.industry == '') {
				this.$message.error('请选择所属行业！')
				return false
			}

			if (this.dataMes.label_id == '') {
				this.$message.error('请选择岗位！')
				return false
			}

			if (this.dataMes.type == '') {
				this.$message.error('请选择计价方式！')
				return false
			}

			if (this.levelPrices.some(it => !it.baseCPrice)) {
				return this.$message.error('请完整填写店铺各个用工等级单价！')
			}

			const priceList = {}
			this.levelPrices.forEach(item => {
				priceList[`price${item.id}`] = item.baseCPrice * 100
			})

			try {
				const ret = await priceCreate({
					industry: this.dataMes.industry,
					city_id: this.dataMes.city_id,
					area_id: this.dataMes.area_id,
					label_id: this.dataMes.label_id,
					remark: this.dataMes.remark,
					type: this.dataMes.type,
					...priceList
				})

				if (!ret.id) {
					throw new Error('创建失败')
				}

				this.$message.success('添加成功')
			} catch (err) {}

			// 重置弹出层的内容
			this.hiddenRY()
			// 刷新列表
			this.getPrice()
		},

		async getIndustryJob() {
			this.mesarr = []
			try {
				let ret = await fetchIndustryJob({
					city_id: this.dataMes.city_id
				})
				this.industryJobList = ret
			} catch (err) {
				console.log(err)
			}
		},

		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.s_time_slot = arr
			} else {
				this.s_time_slot = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		}
	}
}
</script>

<style scoped lang="scss">
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.row-info {
	padding: 10px 0;
	.desc {
		color: #d9001b;
	}
}

.flex {
	display: flex;
	.title-key {
		margin-right: 10px;
	}
	.opacity-0 {
		opacity: 0;
	}
}

.level-box {
	border: 1px solid #ececec;
	border-radius: 5px;
	width: 590px;
}

.level-wrap {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 0 10px 10px;
	position: relative;
	.level-item {
		display: inline-block;
		text-align: center;
		&:nth-child(2n + 1) {
			width: 40px;
		}
		&:nth-child(2n) {
			width: 160px;
			.el-input {
				width: 140px;
			}
		}
		&:nth-child(4) {
			width: 90px;
			.el-input {
				width: 90px;
			}
		}
	}
	.pop-confirm {
		display: inline-block;
		position: absolute;
		right: 11px;
		top: 11px;
		color: #f79233;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/shopPrice/List.vue